<template>
    <sky-chart class="chart" cid="chart" :options="options"></sky-chart>
</template>

<script>
import charts from "@/components/base/charts";
// 按需引入，加快加载速度
var echarts = require("echarts/lib/echarts");
var bmap = require("echarts/extension/bmap/bmap");
export default {
  data() {
    return {
      chart: "chart",
      options: {
        // 加载 bmap 组件
        bmap: {
          // 百度地图中心经纬度
          center: [108.552500, 34.322700],
          // 百度地图缩放
          zoom: 5,
          // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
          roam: true,
          // 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
          mapStyle: {
            styleJson: [
              {
                featureType: "land", //调整土地颜色
                elementType: "geometry",
                stylers: {
                  color: "#081734"
                }
              },
              {
                featureType: "building", //调整建筑物颜色
                elementType: "geometry",
                stylers: {
                  color: "#04406F"
                }
              },
              {
                featureType: "building", //调整建筑物标签是否可视
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "highway", //调整高速道路颜色
                elementType: "geometry",
                stylers: {
                  color: "#015B99"
                }
              },
              {
                featureType: "highway", //调整高速名字是否可视
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "arterial", //调整一些干道颜色
                elementType: "geometry",
                stylers: {
                  color: "#003051"
                }
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "green",
                elementType: "geometry",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "water",
                elementType: "geometry",
                stylers: {
                  color: "#044161"
                }
              },
              {
                featureType: "subway", //调整地铁颜色
                elementType: "geometry.stroke",
                stylers: {
                  color: "#003051"
                }
              },
              {
                featureType: "subway",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "railway",
                elementType: "geometry",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "railway",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "all", //调整所有的标签的边缘颜色
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#313131"
                }
              },
              {
                featureType: "all", //调整所有标签的填充颜色
                elementType: "labels.text.fill",
                stylers: {
                  color: "#FFFFFF"
                }
              },
              {
                featureType: "manmade",
                elementType: "geometry",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "manmade",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "local",
                elementType: "geometry",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "local",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "subway",
                elementType: "geometry",
                stylers: {
                  lightness: -65
                }
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  lightness: -40
                }
              },
              {
                featureType: "boundary",
                elementType: "geometry",
                stylers: {
                  color: "#8b8787",
                  weight: "1",
                  lightness: -29
                }
              }
            ]
          }
        },
        series: [
          {
            type: "scatter",
            // 使用百度地图坐标系
            coordinateSystem: "bmap",
            // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
            data: [[120, 30, 1000]]
          }
        ]
      }
    };
  },
  components: {
    "sky-chart": charts
  }
};
</script>

<style>

</style>
